<template>
    <div class="common-layout">
        <el-container>
            <el-main>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
                <el-tab-pane label="统计" name="RankSat">
                    <TradingRankSat v-if="activeName === 'RankSat'"></TradingRankSat>
                </el-tab-pane>
                <el-tab-pane label="详情" name="RankDetail">
                    <TradingRankDetail v-if="activeName === 'RankDetail'"></TradingRankDetail>
                </el-tab-pane>
                <el-tab-pane label="Gt5" name="RankGt5">
                    <TradingRankGt5 v-if="activeName === 'RankGt5'"></TradingRankGt5>
                </el-tab-pane>
                <el-tab-pane label="Lt5" name="RankLt5">
                    <TradingRankLt5 v-if="activeName === 'RankLt5'"></TradingRankLt5>
                </el-tab-pane>
            </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import TradingRankDetail from '../components/tradingRank/TradingRankDetail.vue';
import TradingRankSat from '../components/TradingRankSat.vue';
import TradingRankGt5 from '../components/tradingRank/TradingRankGt5.vue';
import TradingRankLt5 from '../components/tradingRank/TradingRankLt5.vue';

const activeNameKey = "TradngRankActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'RankSat')

document.title = "Rank"

const change = (tabName) => {
    sessionStorage.setItem(activeNameKey, tabName)
}
</script>